import React, { Component } from "react";
import CheckLogin from "@/hoc/CheckLogin";
import { Layout, Menu } from "antd";
import { MenuUnfoldOutlined, MenuFoldOutlined, UserOutlined, VideoCameraOutlined, UploadOutlined } from "@ant-design/icons";
// 导入从组件页面上复制的css文件
import "@/assets/css/layout.css";
// 导入需要使用的logo
import logo from "@/assets/images/logo.png";
import miniLogo from "@/assets/images/favicon.ico";
// 导入模型
import Model from "@/models/common";
// 导入嵌套路由规则
import Routes from "@/router/nest";

const { Header, Sider, Content } = Layout;
class Index extends Component {
    state = {
        collapsed: false,
        // 保存用户信息
        admininfo: { last_login_addr: {} },
    };

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };
    render() {
        return (
            <Layout style={{ height: "100%" }}>
                <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
                    {/* 通过动态的方式来控制logo的显示 */}
                    <div className="logo">{this.state.collapsed ? <img src={miniLogo} alt="mini_logo" /> : <img src={logo} alt="logo" />}</div>
                    <Menu theme="dark" mode="inline">
                        {/* 给菜单添加点击事件 */}
                        <Menu.Item key="1" onClick={this.changeMenu} icon={<UserOutlined />}>
                            用户管理
                        </Menu.Item>
                        <Menu.Item key="2" icon={<VideoCameraOutlined />}>
                            视频管理
                        </Menu.Item>
                        <Menu.Item key="3" icon={<UploadOutlined />}>
                            上传管理
                        </Menu.Item>
                    </Menu>
                </Sider>
                <Layout className="site-layout">
                    <Header className="site-layout-background" style={{ padding: "5 5" }}>
                        {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: "trigger",
                            onClick: this.toggle,
                        })}
                        <span>
                            {" "}
                            欢迎您：{this.state.admininfo.username}！您上次登录于
                            {" " + this.state.admininfo.last_login_addr.state + " " + this.state.admininfo.last_login_addr.isp}（
                            {this.state.admininfo.last_ip}）
                        </span>
                    </Header>
                    <Content
                        className="site-layout-background"
                        style={{
                            margin: "24px 16px",
                            padding: 24,
                            minHeight: 280,
                        }}
                    >
                        {/* <div>欢迎使用xxx项目后台管理系统！</div> */}
                        {/* 嵌套的路由规则 */}
                        <Routes />
                    </Content>
                </Layout>
            </Layout>
        );
    }

    // 生命周期
    componentDidMount() {
        // 获取管理员信息
        Model.getAdminInfo().then((ret) => {
            // console.log(ret);
            this.setState(() => {
                return {
                    admininfo: ret.accountInfo,
                };
            });
        });
    }

    // 菜单点击时候触发的事件处理程序
    changeMenu = (obj) => {
        // 判断key得到要跳转的地址
        if (obj.key === "1") {
            // 去用户管理页面
            this.props.history.push("/dashboard/users");
        }
    };
}

export default CheckLogin(Index);
